<template xmlns="">
<div class="musicList">
  <div class="musicTop">
    <div class="title"><h2>发现歌单</h2></div>
    <div><van-button  class="more"  @click="fetchMore">查看更多</van-button></div>
  </div>
  <div class="content">
    <van-swipe
        :width="450"
        :height="190"
        :loop="false"
        :show-indicators="false"
        indicator-color="white"
        class="back-swipe"
        vertical
    >
      <van-swipe-item v-for="item in state.musicList"
                      :key="item.id"
                      class="item">
        <!--需要图片-->
        <router-link :to="{path:'/itemMusic',query:{id:item.id}}">
        <img :src="item.picUrl" alt=""/>
        <div class="playCount">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-play25_play"></use>
          </svg>
          {{forMat(item.playCount)}}
        </div>
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="hot">

  </div>
</div>
<!-- <div> {{state.musicList}}</div>-->
</template>

<script>
import service from "@/components/request/request";
import {onMounted, reactive} from "vue";

export default {
  name: "MusicList",
  data(){
    return{
      model:{},
    }
  },
  methods:{
     async fetch(){
      const res=await service.get("personalized?limit=20")
       // console.log(res);
      this.model=res.data.result;
     },
     async fetchMore(){
      this.$router.go('/')
    },
    async getHot(){
       const hot = await service.get("/hot/topic?limit=30&offset=10");
      console.log(hot)
    }
  },
  mounted() {
    this.fetch()
    this.getHot()
  },
  setup(){
    //返回这个出去,vue3写法
    const state=reactive({
      musicList:[],
    });
    function forMat(num){
      if (num>=100000000){
        return(num/1000000).toFixed(1)+"亿"
      }else if (num>=10000) {
        return (num/10000).toFixed(1)+"万"
      }
    }
    onMounted(async ()=>{
      let json=await service.get("personalized?limit=10")
      state.musicList=json.data.result;
      //保存数据到本地缓存
      sessionStorage.setItem('itemDetail',JSON.stringify(state))
    });
    return {state,forMat};
  },
  watch:{

  }
}
</script>

<style lang="less" scoped>
.musicList {
  padding: 0.2rem;
  width: 100%;
  height: 5rem;

  .musicTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .1rem;
    width: 100%;
    height: .6rem;
    .title {
      font-weight: 900;
      font-size: .4rem;
    }
    .more {
      border: 1px solid #ccc;
      text-align: center;
      line-height: 0.6rem;
      padding: 0 0.2rem;
      border-radius: 0.4rem;
      font-size: 8px;
      color: white;
      background-color: red;
    }
  }
  .content{
    margin-top: 0.2rem;
    justify-content: space-around;
    display: flex;
    .back-swipe{
      margin-top: 10px;
      display: flex;
      margin-bottom: 2px;
      .item{
        position: relative;
        padding-right: 0.2rem;
        margin-top: 15px;
        img{
          height: 100%;
          width: 100%;
          border-radius: 0.3rem;
        }
        .playCount{
          top: 0;
          right: 0.3rem;
          position: absolute;
          color: white;
          margin-top: 0.1rem;
          font-size: 18px;
          .icon{
            height: 0.3rem;
            width: 0.3rem;
          }
        }
        .name{
          color: #000;
        }
      }
    }
  }
}
</style>
